// Common navigation component for all pages
function createNavigation(activePage) {
    const getTabClass = (page) => {
        const baseClass = "flex flex-col items-center px-2 py-2 transition-colors duration-200";
        if (activePage === page) {
            return `${baseClass} text-indigo-600 relative`;
        }
        return `${baseClass} text-gray-500 hover:text-gray-700`;
    };

    const getActiveIndicator = (page) => {
        if (activePage === page) {
            return '<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-indigo-600 rounded-full"></div>';
        }
        return '';
    };

    return `
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg" style="max-width: 750px; margin: 0 auto;">
        <div class="flex justify-around py-2">
            <a href="employer-homepage.html" class="${getTabClass('home')}">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
                ${getActiveIndicator('home')}
            </a>
            <a href="employer-aunt-management.html" class="${getTabClass('aunt')}">
                <i class="fas fa-user-friends text-xl"></i>
                <span class="text-xs mt-1">阿姨</span>
                ${getActiveIndicator('aunt')}
            </a>
            <a href="employer-job-management.html" class="${getTabClass('job')}">
                <i class="fas fa-briefcase text-xl"></i>
                <span class="text-xs mt-1">招聘</span>
                ${getActiveIndicator('job')}
            </a>
            <a href="employer-my-page.html" class="${getTabClass('my')}">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
                ${getActiveIndicator('my')}
            </a>
        </div>
    </div>
    `;
}

// Initialize navigation on page load
document.addEventListener('DOMContentLoaded', function() {
    // Get the current page from the URL
    const currentPage = window.location.pathname.split('/').pop();
    let activePage = 'home';
    
    if (currentPage.includes('homepage')) {
        activePage = 'home';
    } else if (currentPage.includes('aunt')) {
        activePage = 'aunt';
    } else if (currentPage.includes('job')) {
        activePage = 'job';
    } else if (currentPage.includes('my')) {
        activePage = 'my';
    }
    
    // Find existing navigation and replace it
    const existingNav = document.querySelector('.fixed.bottom-0, nav');
    if (existingNav) {
        existingNav.outerHTML = createNavigation(activePage);
    } else {
        // If no existing navigation, add it to the body
        document.body.insertAdjacentHTML('beforeend', createNavigation(activePage));
    }
    
    // Ensure body has proper bottom padding for fixed navigation
    if (!document.body.classList.contains('pb-16')) {
        document.body.classList.add('pb-16');
    }
});